<template>
    <div class='y-ranking'>
        <img v-if="isIcon(num).bol" class="icon" :src="String(isIcon(num).val)">
        <span v-if="!isIcon(num).bol" class="label">{{ num }}</span>
    </div>
</template>

<script lang='ts' setup>
import ONE from "./png/1.png";
import TWO from "./png/2.png";
import THREE from "./png/3.png";
type ISICON = {
    bol: boolean;
    val: string | number;
}
const ranking = {
    1: ONE,
    2: TWO,
    3: THREE
}
defineProps({
    num: {
        type: Number,
        default: 1
    }
});
function isIcon(num: number): ISICON {
    const obj = { bol: false, val: num };
    if (num in ranking) {
        obj.bol = true;
        //@ts-ignore
        obj.val = ranking[num];
    }
    return obj;
}
</script>

<style lang='less' scoped>
.y-ranking {
    width: 24px;
    text-align: center;
    .icon {
        -webkit-user-drag: none;
        width: 100%;
    }
}
</style>